<template>
  <div>
    <div class="canvas-box" id="canvas-box"></div>
  </div>
</template>
<script>
import Canvas from './js/script'

let canvas

export default {
  name: "siri-animation",
  data() {
    return {
      behavior: 0
    }
  },
  mounted() {
    this.renderAnimation()
  },
  methods: {
    renderAnimation() {
      canvas = new Canvas(document.getElementById("canvas-box"), true);
      canvas.init();

      function render() {
        window.requestAnimationFrame(function () {
          canvas.render();
          render();
        });
      }

      render();

      // event
      // window.addEventListener( "resize", function () {
      //       canvas.resize();
      //  });
      let index = 0;
      canvas.canvas.addEventListener("click", function (e) {
        // console.log("click", e)
        canvas.mouseX = e.clientX;
        canvas.mouseY = e.clientY;
        // 改变行为
        // canvas.resize();
        canvas.changeBehavior(index)
        index++
      });
    }
  }
}
</script>

<style scoped>

.canvas-box {
  position: relative;
  background: #000;
  color: #fff;
  font-size: 2rem;
  line-height: 1.5;
}
</style>